<template>
  <gui-page ref="guiPage" :customHeader="true">
    <template v-slot:gHeader>
      <nav-bar-custom left-icon="left" :title="$t('materials.list')"></nav-bar-custom>
    </template>
    <template v-slot:gBody  v-if="pagePermission('/pages/sopPage/sopList')">
      <view class="distributed">
        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x distributed-head">
          <view class="custom-card-title">
            <text class="title-line"></text>
            {{ $t('distributedEnter.barcodeScan') }}
          </view>
          <view class="gui-form-item gui-border-b" style="padding: 20rpx 0;">
            <text class="item-info-title" style="padding-right: 40rpx;">
              <text class="required-color">*</text>
              {{ $t('materials.scan') }}
            </text>
            <uni-easyinput class="uni-mt-5" suffixIcon="scan" v-model="data.code" 
                           type="search" :placeholder="$t('materials.pleaseEnterScan')" @confirm="confirm"
                           @iconClick="iconClick">
            </uni-easyinput>
          </view>
        </view>
        <!-- 分类列表的标题 -->
        <view class="list">
         
              <!-- 分类导航 -->
              <view class="gui-border-b gui-bg-gray gui-dark-bg-level-3" style="padding:15rpx 30rpx;"
                    id="myheader">
                <gui-switch-navigation :size="240" :items="data.navItems"
                                       @change="navchange"></gui-switch-navigation>
              </view>
          
        </view>
        <!-- 扫描信息展示 -->
        <scroll-view :show-scrollbar="false" :scroll-y="true" class="scroll" @scrolltolower="scrolltolowerFn">
          <view style="height: 15rpx"></view>
          <!-- 分类列表 -->
          <view class="concrete-list" v-for="(item,index) in data.artciles" :key="index" @click="goPage(item.uuid)" >
            <view class="concrete-list-haeader">
              <text class="line"></text>
              {{ item.title }}
            </view>
            <view class="concrete-list-card">
              <view class="author">{{$t('materials.author')}}：{{ item.creator }}</view>
              <view class="createTime">{{$t('finishedInventory.creationTime')}}：{{ item.createTime }}</view>
            </view>
          </view>
          <view v-if="data.noticeHooks" class="noticeHooks">
						{{ data.artciles.length == 0 ? $t('stockManage.notAvailable') : $t('stockManage.without') }}
					</view>
        </scroll-view>
      </view>
    </template>
  </gui-page>
</template>

<script setup>
import {onMounted, reactive} from 'vue'
import pdaScan from '@/hooks/pdaScan.js'
import {useStore} from 'vuex'
import {getSopCategory, getSopPageSet,getViewType,getSopFiles} from '@/api/api.js'
import GuiSwitchNavigation from '@/Grace6/components/gui-switch-navigation.vue'
import {navigate} from "@/utils/routerSkip";

let store = useStore()
const {scan} = pdaScan()

const data = reactive({
  code: '',
  navItems: [],
  artciles: [], //列表数据， 分类切换
  apiLoadingStatus: false,
  pageLoading: false,
  currentIndex: 0, //当前展示的分类索引
  page: 1,
	rows: 20,
  isLoading:false,
  noticeHooks:false
})

/* 挂载的时候执行*/
onMounted(async () => {
  // 获取分类
  await getListByPid().then(()=>{
 
	  // 获取列表数据
	   getPageSet()
  })
  
})

/* 获取SOP分类 */
const getListByPid = async () => {
  await getSopCategory().then((res) => {
    if (res.length) {
    res.forEach((item, index, arr) => {
      data.navItems.push({id: item.id, name: item.text})
    })
    }
  })
}

/* 根据ID获取分页数据 */
const getPageSet = async () => {
  let categoryId = data.navItems[data.currentIndex].id;
  await getSopPageSet('', categoryId).then((res) => {
    // console.log(res)
    data.isLoading = false;
    if (res && res.rows) {
      data.noticeHooks = false
      if (data.page == 1) {
        if (res.rows.length == 0) {
          data.noticeHooks = true
        }
        data.artciles = res.rows
      } else {
        data.artciles.push(...res.rows)
      }
      data.noticeHooks = data.artciles.length >= res.total
			data.isFinish = data.artciles.length >= res.total;
    }
  })
}

// 监听用户使用相机
const iconClick = async (type) => {
  if (type === 'suffix') {
    let code = await scan()
    getCode(code, 'scan')
  }
}

//扫描条码框，回车确认
const confirm = () => {
  getCode(data.code, 'keydown')
}

//获取code
const getCode = async (code, type) => {
  console.log(type)
  if(type=='scan'){
    goPage(code)
  }else{
    let categoryId = data.navItems[data.currentIndex].id;
    await getSopPageSet(code, categoryId).then((res) => {
    console.log('res的值是'+res)
    if (res && res.rows) {
        data.artciles = res.rows
        data.code=""
    }
  })
  }
  
}

/* 跳转页面 */
const goPage = function (uuid) {
  // 获取列表详情类型
  getViewType(uuid).then(res => {
    console.log(res)
    if (res.data == 'all' || res.data == 'null') {
      navigate({
        url: "/pages/sopPage/sopDetails?uuid=" + uuid
      })
    }else if(res.data == 'image'){
      navigate({
        url: "/pages/sopPage/imgView?uuid=" + uuid
      })
    }else if(res.data == 'pdf'){
      getSopFiles(uuid).then(res => {
        console.log(res)
        // return
        navigate({
          url: `/pages/sopPage/pdfPreview?url=${res[0].url}&title=${res[0].name}`
        })
      })
    }else{
      navigate({
        url: "/pages/sopPage/videoView?uuid=" + uuid
      })
    }
  })
}
/* 分类切换的时候 */
const navchange = function (index) {
  data.currentIndex = index
  data.artciles.length = 0;
  getPageSet()
}

// 分类相关的事件
const reload = () => {
  data.page = 1
  getPageSet()
}

// 下拉加载
const scrolltolowerFn = () => {
	if (!data.noticeHooks) {
		data.page++
		data.isLoading = true;
		getPageSet()
	}
}
</script>

<style scoped lang="scss">
.gui-page-fixed-top {
  top: 145px !important;
}

.distributed {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 88rpx);
  // height: 100vh;
}

.barcodeSplitting {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 88rpx);
  // height: 100vh;
}

.distributed-head {
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
}

.scroll {
  flex: 1;
  height: 2rpx;
}

.concrete-list {
  height: 160rpx;
  overflow: hidden;
  background-color: #F8F8F8;
  margin: 10rpx 0;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;;

  &-haeader {
    height: 60rpx;
    line-height: 60rpx;
    color: #373737;
    font-size: 30rpx;
    display: flex;

    .line {
      width: 6rpx;
      height: 30rpx;
      background: #37886C;
      margin-right: 14rpx;
      margin-top: 15rpx;
    }
  }

  &-card {
    flex: 1;
    display: flex;
    flex-direction: row;
    line-height: 60rpx;

    .author {
      color: #969696;
      font-size: 26rpx;
      text-align: left;
      width: 50%;
    }

    .createTime {
      flex: 1;
      color: #455a6499;
      font-size: 26rpx;
      text-align: right;
    }
  }
}
.noticeHooks {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	font-size: 32rpx;
	color: #999;
}
</style>
